<template>
	<view>
		<view class="proSwiper posRel">
			<view class="coverPic samePar defBg">
				<image class="samePar posAbso ltzero" :src="getCloudFilePath(zxsInfo.zjImg)" mode="aspectFill" lazy-load></image>
			</view>
			<view class="fansNum posAbso">
				<view class="fans">粉丝:{{zxsInfo.scNum}}</view>
			</view>
			<view class="basicInfoTop posRel">
				<view class="infoTop spaceBet">
					<view class="topL hasFlex">
						<view class="name">{{zxsInfo.realName}}</view>
						<view class="zs">{{zxsInfo.prov}}·{{zxsInfo.city}}</view>
					</view>
					<view class="price">¥{{zxsInfo.serviceFee}}</view>
				</view>
				<view class="otherZc clearfix">
					<view class="otherZcItem"
						v-for="(item,index) in toArrayFuns((zxsInfo.zsName || ''),',')"
						:key="index" 
					>{{item}}</view> 
				</view>
				<view class="fields clearfix">
					<view class="fieldsTag"
						v-for="(item,index) in parScName"
						:key="index"
					>{{item}}</view> 
				</view>
			</view>
		</view>
		
		<view class="basicInfoBot spaceBet"> 
			<view class="botItem posRel" v-if="zxsInfo.workRange !== '' && zxsInfo.workRange !== undefined">
				<view class="botItemCon">{{calWrokRange(zxsInfo.workRange)}}</view>
				<view class="botItemTit">从业时长</view>
				<view class="lineView posAbso"></view>
			</view>
			<view class="botItem posRel">
				<view class="botItemCon">{{zxsInfo.helpNum}}</view>
				<view class="botItemTit">帮助人数/人</view>
				<view class="lineView posAbso"></view>
			</view>
			<view class="botItem posRel">
				<view class="botItemCon">{{zxsInfo.serviceHours}}</view>
				<view class="botItemTit">服务时长/h</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			zxsInfo:Object,
			parScName:Array
		},
		computed:{
			toArrayFuns(){
				return function(str,splitQuote){
					var tmpArr = str.split(splitQuote);
					return tmpArr;
				}
			},
			calWrokRange(){
				return function(workRange){
					var tmpArr = workRange.split(',');
					if(tmpArr.length == 1){
						return workRange.split(',')[0] + '年'
					}else{
						return workRange.split(',')[0] + '年' + workRange.split(',')[1] + '个月';
					}
				}
			}
		},
		data(){
			return{
				
			}
		},
	}
</script>

<style lang='scss' scoped>
	.basicInfoBot{
		width: 100%;
		background: $pss-colorFFF;
		position: relative;
		padding:70rpx 0 30rpx;
		margin-bottom: 20rpx;
		.botItem{
			width: 33.3%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.botItemCon{
				font-size: $font-size30;
				font-weight: bold;
				color: $pss-text-color3;
				margin-bottom: 10rpx;
			}
			.botItemTit{
				font-size: $font-size24;
				color: $pss-text-colora;
			}
			.lineView{
				width: 1rpx;
				height: 40%;
				right: 0;
				top: 30%;
				background: $pss-text-colord;
			}
		}
	}
	.proSwiper{
		/* height: 520rpx; */
		height: 750rpx;
		position: relative;
		z-index: 5;
		.coverPic{
			width: 100%;
			height: 750rpx;
			/* height: 520rpx; */
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.fansNum{
			padding: 20rpx;
			background: rgba(0,0,0,.5);
			color: #fff;
			font-size: $font-size22;
			right: 30rpx;
			bottom: 120rpx;
			border-radius: $pss-border-radius10;
		}
		.basicInfoTop{
			width: 650rpx;
			border-radius: 20rpx;
			box-shadow: 0 0 15rpx rgba(0,0,0,.1);
			padding: 30rpx;
			background: #fff;
			margin:-80rpx auto 0;
			z-index: 10;
			.topL{
				align-items: center;
				.name{
					font-size: 36rpx;
					color: $pss-text-color3;
					font-weight: bold;
					margin-right: 15rpx;
				}
				.zs{
					font-size: $font-size24;
					color: $pss-text-colora;
				}
			}
			.price{
				font-size: $font-size30;
				color: $pss-color-red;
				font-weight: bold;
			}
			.otherZc{
				margin: 10rpx 0 0;
				.otherZcItem{
					float: left;
					margin-right: 15rpx;
					font-size: $font-size28;
					color: $pss-text-color3; 
					margin-bottom: 10rpx;
				}
			}
			.fieldsTag{
				padding: 0 15rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 10rpx;
				font-size: $font-size24;
				background:#f2fdf9;
				color: $pss-color-green;
				float: left;
				margin: 0 10rpx 10rpx 0;
			}
		}
	}
</style>